<template>
  <div class="wrap" id="children3">
    <el-dialog
      :title="title"
      :visible.sync="state"
      @close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @open="open"
    >
      <el-form>
        <el-form-item label="下边距" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="bottom" placeholder="请输入下边距"></el-input>
        </el-form-item>
        <el-form-item label="左边距" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="left" placeholder="请输入左边距"></el-input>
        </el-form-item>
        <el-form-item label="行内标签间距" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="inline_tag" placeholder="请输入行内标签间距"></el-input>
        </el-form-item>
        <el-form-item label="行间距" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="inline" placeholder="请输入行间距"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="reset">重置</el-button>

        <el-button type="primary" @click="close(1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { findInfo } from "../utils/interface";
export default {
  props: {
    pdfOptionsState: {
      type: Boolean,
      default: false
    },
    optionsSelect: null
  },
  data() {
    return {
      formLabelWidth: "120px",
      title: "",
      bottom: "",
      left: "",
      inline_tag: "",
      inline: ""
    };
  },
  computed: {
    state: {
      get() {
        return this.pdfOptionsState;
      },
      set() {}
    }
  },
  methods: {
    close(v) {
      if (v) {
        this.$emit("pdfOptions", {
          type: this.optionsSelect.toString(),
          bottom: this.bottom,
          left: this.left,
          spacing_line_inside: this.inline_tag,
          spacing_algin: this.inline
        });
      } else {
        this.$emit("pdfOptions");
      }
    },
    reset(){
      if(this.optionsSelect==1){
        this.$emit("pdfOptions", {
          type: this.optionsSelect.toString(),
          bottom:"24.99",
          left: "23.52",
          spacing_line_inside: "5.88",
          spacing_algin: "0"
        });
      }else if(this.optionsSelect==2){
        this.$emit("pdfOptions", {
          type: this.optionsSelect.toString(),
          bottom: "38.22",
          left: "23.52",
          spacing_line_inside: "4.41",
          spacing_algin: "-2"
        });
      }
    },
    open() {
      this.bottom = "";
      this.left =  "";
      this.inline_tag =  "";
      this.inline = "";
      switch (this.optionsSelect) {
        case 1:
          this.title = "A4宽47mm×高18.8mm 圆角60格（左右2m间隙）";
          break;
        case 2:
          this.title = "A4宽48.5mmX高25.4mm 直角44枚（无间隙）";
          break;
      }
      this.findInfo();
    },
    findInfo() {
      findInfo({ type: this.optionsSelect }).then(res => {
        console.log(res);
        if (res.data.data) {
          this.bottom = res.data.data.bottom;
          this.left = res.data.data.left;
          this.inline_tag = res.data.data.spacing_line_inside;
          this.inline = res.data.data.spacing_algin;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.tss {
  font-size: 12px;
  text-align: center;
  margin-bottom: 30px;
  color: #f56c6c;
}
.el-input {
  max-width: 330px;
}
.el-button {
  max-width: 134px;
}
.sendCode {
  display: flex;
  align-items: center;
  .el-input {
    width: auto;
    margin-right: 10px;
  }
}
</style>
<style lang="scss">
#children3 .el-dialog {
  width: 30% !important;
  min-width: 400px;
}
</style>


